<template>
  <div>
    <!-- 确保ID与你的图表对应 -->
    <div id="echartszuo3" class="charts"></div>
  </div>
</template>

<script>
import * as echarts from "echarts"; // 确保已经安装了echarts并正确导入

export default {
  data() {
    return {
      timer: null,
    };
  },
  mounted() {
    this.initEcharts();
    var numss = 1;
    this.timer = setInterval(() => {
      if (this.timer) {
        if (numss - 1 == 0) {
          this.initEcharts();
          numss = numss + 1;
        } else if (numss - 2 == 0) {
          this.initEcharts1();
          numss = numss + 1;
        } else if (numss - 3 == 0) {
          this.initEcharts2();
          numss = numss + 1;
        } else {
          this.initEcharts3();
          numss = numss - 3;
        }
      }
    }, 1500);
    window.addEventListener("resize", this.handleWindowResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleWindowResize);
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    initEcharts() {
      const myChart = echarts.init(document.getElementById("echartszuo3"));
      let data = [
        { value: 4200, name: "广东" },
        { value: 2300, name: "江西" },
        { value: 7000, name: "福建" },
      ];
      const option = {
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
          trigger: "item",
          formatter: "{b}: <br/>{c} ({d}%)",
        },
        color: ["#20b9cf", "#2089cf", "#205bcf"],
        legend: {
          //图例组件，颜色和名字
          x: "70%",
          y: "center",
          orient: "vertical",
          itemGap: 12, //图例每项之间的间隔
          itemWidth: 10,
          itemHeight: 10,
          icon: "rect",
          data: ["广东", "江西", "福建"],
          textStyle: {
            color: [],
            fontStyle: "normal",
            fontFamily: "微软雅黑",
            fontSize: 12,
          },
        },
        series: [
          {
            name: "行业占比",
            type: "pie",
            clockwise: false, //饼图的扇区是否是顺时针排布
            minAngle: 20, //最小的扇区角度（0 ~ 360）
            center: ["35%", "50%"], //饼图的中心（圆心）坐标
            radius: [40, 60], //饼图的半径
            //  avoidLabelOverlap: true, ////是否启用防止标签重叠
            itemStyle: {
              //图形样式
              normal: {
                borderColor: "transparent",
                borderWidth: 2,
              },
            },
            label: {
              //标签的位置
              normal: {
                show: true,
                position: "inside", //标签的位置
                formatter: "{d}%",
                textStyle: {
                  color: "#fff",
                },
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontWeight: "bold",
                },
              },
            },
            data: data,
          },
          {
            name: "",
            type: "pie",
            clockwise: false,
            silent: true,
            minAngle: 20, //最小的扇区角度（0 ~ 360）
            center: ["35%", "50%"], //饼图的中心（圆心）坐标
            radius: [0, 40], //饼图的半径
            itemStyle: {
              //图形样式
              normal: {
                borderColor: "#1e2239",
                borderWidth: 1.5,
                opacity: 0.21,
              },
            },
            label: {
              //标签的位置
              normal: {
                show: false,
              },
            },
            data: data,
          },
        ],
      };

      myChart.setOption(option);
    },
    initEcharts1() {
      const myChart = echarts.init(document.getElementById("echartszuo3"));
      let data = [
        { value: 2000, name: "广东" },
        { value: 5000, name: "江西" },
        { value: 6000, name: "福建" },
      ];
      const option = {
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
          trigger: "item",
          formatter: "{b}: <br/>{c} ({d}%)",
        },
        color: ["#20b9cf", "#2089cf", "#205bcf"],
        legend: {
          //图例组件，颜色和名字
          x: "70%",
          y: "center",
          orient: "vertical",
          itemGap: 12, //图例每项之间的间隔
          itemWidth: 10,
          itemHeight: 10,
          icon: "rect",
          data: ["广东", "江西", "福建"],
          textStyle: {
            color: [],
            fontStyle: "normal",
            fontFamily: "微软雅黑",
            fontSize: 12,
          },
        },
        series: [
          {
            name: "行业占比",
            type: "pie",
            clockwise: false, //饼图的扇区是否是顺时针排布
            minAngle: 20, //最小的扇区角度（0 ~ 360）
            center: ["35%", "50%"], //饼图的中心（圆心）坐标
            radius: [40, 60], //饼图的半径
            //  avoidLabelOverlap: true, ////是否启用防止标签重叠
            itemStyle: {
              //图形样式
              normal: {
                borderColor: "transparent",
                borderWidth: 2,
              },
            },
            label: {
              //标签的位置
              normal: {
                show: true,
                position: "inside", //标签的位置
                formatter: "{d}%",
                textStyle: {
                  color: "#fff",
                },
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontWeight: "bold",
                },
              },
            },
            data: data,
          },
          {
            name: "",
            type: "pie",
            clockwise: false,
            silent: true,
            minAngle: 20, //最小的扇区角度（0 ~ 360）
            center: ["35%", "50%"], //饼图的中心（圆心）坐标
            radius: [0, 40], //饼图的半径
            itemStyle: {
              //图形样式
              normal: {
                borderColor: "#1e2239",
                borderWidth: 1.5,
                opacity: 0.21,
              },
            },
            label: {
              //标签的位置
              normal: {
                show: false,
              },
            },
            data: data,
          },
        ],
      };

      myChart.setOption(option);
    },

    initEcharts2() {
      const myChart = echarts.init(document.getElementById("echartszuo3"));
      let data = [
        { value: 3000, name: "广东" },
        { value: 6500, name: "江西" },
        { value: 3000, name: "福建" },
      ];
      const option = {
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
          trigger: "item",
          formatter: "{b}: <br/>{c} ({d}%)",
        },
        color: ["#20b9cf", "#2089cf", "#205bcf"],
        legend: {
          //图例组件，颜色和名字
          x: "70%",
          y: "center",
          orient: "vertical",
          itemGap: 12, //图例每项之间的间隔
          itemWidth: 10,
          itemHeight: 10,
          icon: "rect",
          data: ["广东", "江西", "福建"],
          textStyle: {
            color: [],
            fontStyle: "normal",
            fontFamily: "微软雅黑",
            fontSize: 12,
          },
        },
        series: [
          {
            name: "行业占比",
            type: "pie",
            clockwise: false, //饼图的扇区是否是顺时针排布
            minAngle: 20, //最小的扇区角度（0 ~ 360）
            center: ["35%", "50%"], //饼图的中心（圆心）坐标
            radius: [40, 60], //饼图的半径
            //  avoidLabelOverlap: true, ////是否启用防止标签重叠
            itemStyle: {
              //图形样式
              normal: {
                borderColor: "transparent",
                borderWidth: 2,
              },
            },
            label: {
              //标签的位置
              normal: {
                show: true,
                position: "inside", //标签的位置
                formatter: "{d}%",
                textStyle: {
                  color: "#fff",
                },
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontWeight: "bold",
                },
              },
            },
            data: data,
          },
          {
            name: "",
            type: "pie",
            clockwise: false,
            silent: true,
            minAngle: 20, //最小的扇区角度（0 ~ 360）
            center: ["35%", "50%"], //饼图的中心（圆心）坐标
            radius: [0, 40], //饼图的半径
            itemStyle: {
              //图形样式
              normal: {
                borderColor: "#1e2239",
                borderWidth: 1.5,
                opacity: 0.21,
              },
            },
            label: {
              //标签的位置
              normal: {
                show: false,
              },
            },
            data: data,
          },
        ],
      };

      myChart.setOption(option);
    },

    initEcharts3() {
      const myChart = echarts.init(document.getElementById("echartszuo3"));
      let data = [
        { value: 1000, name: "广东" },
        { value: 8500, name: "江西" },
        { value: 1800, name: "福建" },
      ];
      const option = {
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
          trigger: "item",
          formatter: "{b}: <br/>{c} ({d}%)",
        },
        color: ["#20b9cf", "#2089cf", "#205bcf"],
        legend: {
          //图例组件，颜色和名字
          x: "70%",
          y: "center",
          orient: "vertical",
          itemGap: 12, //图例每项之间的间隔
          itemWidth: 10,
          itemHeight: 10,
          icon: "rect",
          data: ["广东", "江西", "福建"],
          textStyle: {
            color: [],
            fontStyle: "normal",
            fontFamily: "微软雅黑",
            fontSize: 12,
          },
        },
        series: [
          {
            name: "行业占比",
            type: "pie",
            clockwise: false, //饼图的扇区是否是顺时针排布
            minAngle: 20, //最小的扇区角度（0 ~ 360）
            center: ["35%", "50%"], //饼图的中心（圆心）坐标
            radius: [40, 60], //饼图的半径
            //  avoidLabelOverlap: true, ////是否启用防止标签重叠
            itemStyle: {
              //图形样式
              normal: {
                borderColor: "transparent",
                borderWidth: 2,
              },
            },
            label: {
              //标签的位置
              normal: {
                show: true,
                position: "inside", //标签的位置
                formatter: "{d}%",
                textStyle: {
                  color: "#fff",
                },
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontWeight: "bold",
                },
              },
            },
            data: data,
          },
          {
            name: "",
            type: "pie",
            clockwise: false,
            silent: true,
            minAngle: 20, //最小的扇区角度（0 ~ 360）
            center: ["35%", "50%"], //饼图的中心（圆心）坐标
            radius: [0, 40], //饼图的半径
            itemStyle: {
              //图形样式
              normal: {
                borderColor: "#1e2239",
                borderWidth: 1.5,
                opacity: 0.21,
              },
            },
            label: {
              //标签的位置
              normal: {
                show: false,
              },
            },
            data: data,
          },
        ],
      };

      myChart.setOption(option);
    },

    handleWindowResize() {
      this.$nextTick(() => {
        this.myCharts.forEach((chart) => chart.resize());
      });
    },
  },
  data() {
    return {
      myCharts: [], // 用于存储所有echarts实例，以便在窗口调整大小时重新调整图表
    };
  },
};
</script>
